<template>
    <!-- 导航栏 -->
    <div class="headerbox">
        <div class="header">
            <div class="headerL">
                <a onclick="javascript:history.back()" class="goback">
                    <img src="/assets/images/goback.png" />
                </a>
            </div>
            <div class="headerC0">
                <div class="ssdiv">
                    <img src="/assets/images/ss.png" />
                    <input v-model="keywords" @change="SelectKeywords" type="text" placeholder="输入关键字..." />
                </div>
            </div>
            <div class="headerR">
                <a href="javascript:void()" @click="show=!show"><img src="/assets/images/tr.png" /></a>
            </div>
        </div>
    </div>
    <div class="clear"></div>

    <!-- 筛选 -->
    <div class="shopType">
        <van-dropdown-menu>
            <van-dropdown-item v-model="flag" :options="option1" @change="SelectFlag" />
            <van-dropdown-item v-model="orderby" :options="option2" @change="SelectOrder" />
        </van-dropdown-menu>
    </div>
    <div class="clear"></div>
    <div class="hbox"></div>

    <!-- 商品列表 -->
    <div class="mainWarp" style="background:#f3f3f3">
        <ul class="proul">
            <li v-for="item in prolist">
                <router-link :to="{path:'/product/product/info', query:{proid: item.id}}">
                    <img :src="item.cover_cdn" />
                </router-link>
                <router-link :to="{path:'/product/product/info', query:{proid: item.id}}">
                    <p class="tit">
                        {{item.name}}
                    </p>
                </router-link>
                <div class="price">
                    <p>￥{{item.price}}</p>
                    <van-tag type="danger" v-if="item.flag == '1'">{{item.flag_text}}</van-tag>
                    <van-tag type="danger" v-if="item.flag == '2'">{{item.flag_text}}</van-tag>
                    <van-tag type="danger" v-if="item.flag == '3'">{{item.flag_text}}</van-tag>

                </div>
            </li>
        </ul>
    </div>

    <!-- 右侧弹出层 -->
    <van-popup v-model:show="show" position="right">
        <div class="type">
            <van-sidebar v-model="active" @change="SelectType">
                <van-sidebar-item v-for="item in typelist" :title="item.name" />
            </van-sidebar>
        </div>
    </van-popup>

</template>

<script>
    export default {
        name: "ProductType",
        created() {
            this.typeid = this.$route.query ? this.$route.query.typeid : 0

            this.ProductData()
        },

        data() {
            return {
                show: false,    //右侧弹出层
                typeid: 0,       //分类id
                active: 0,       //右侧默认选中下标
                prolist: [],     //商品列表
                typelist: [],    //分类列表
                flag: 0,         //热门类型
                orderby: 'id',   //排序
                keywords: '',    //g关键词
                option1: [
                    { text: "全部商品", value: 0 },
                    { text: "新款商品", value: 1 },
                    { text: "热销商品", value: 2 },
                    { text: "推荐商品", value: 3 },
                ],
                option2: [
                    { text: '默认排序', value: 'id' },
                    { text: '价格排序', value: 'price' },
                    { text: '库存排序', value: 'stock' },
                ],
            }
        },

        methods: {

            async ProductData() {
                // 组装 数据
                var data = {
                    typeid: this.typeid,
                    flag: this.flag,
                    orderby: this.orderby,
                    keywords: this.keywords,
                }
                // console.log(data);

                var result = await this.$api.ProductType(data)

                if (result.code == 0) {
                    this.$notify({
                        type: "danger",
                        message: result.msg,
                        duration: 1000,
                        onClose: () => {
                            this.$router.go(-1)
                        }
                    })
                    return false
                }

                this.prolist = result.data.prolist
                this.typelist = result.data.typelist

                for (var key in this.typelist) {
                    // 找出等于当前分类id的key下标
                    if (this.typelist[key].id == this.typeid) {
                        this.active = key
                    }

                }
            },

            // 选择商品状态
            SelectFlag(value) {
                this.flag = value
                this.ProductData()
            },

            // 选择排序
            SelectOrder(value) {
                this.Orderby = value
                this.ProductData()
            },

            // 关键词
            SelectKeywords() {
                this.ProductData()
            },

            // 切换分类
            SelectType(index) {
                this.active = index
                this.typeid = this.typelist[index].id

                this.ProductData()
                this.show = false

            }

        },
    }
</script>
<style>
    ul.proul li .price {
        display: flex;
        justify-content: space-between;
    }

    .type .van-sidebar {
        width: 100px;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        padding-top: 4em;
    }
</style>